<!doctype html>
<html lang="">
<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>st</title>

  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <!-- Place favicon.ico in the root directory -->

  <!-- build:css styles/vendor.css -->
  <!-- bower:css -->
  <link rel="stylesheet" href="/bower_components/datatables/media/css/dataTables.bootstrap.css" />
  <!-- endbower -->
  <!-- endbuild -->

  <!-- build:css styles/main.css -->
  <link rel="stylesheet" href="styles/main.css">
  <!-- endbuild -->

</head>
<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
  your browser</a> to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Ssly</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">学生管理 <span class="sr-only">(current)</span></a></li>
        <li><a href="admin.html">员工管理</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a id="admin" href="#"></a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
             aria-expanded="false">用户选项 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <!--<li><a href="#">修改密码</a></li>-->
            <li role="separator" class="divider"></li>
            <li><a href="#" onclick="logout()">退出登录</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


<div class="main">
  <table id="myTable" class="table table-hover table-bordered table-condensed text-center">
    <thead>
    <tr>
      <td width="40">ID</td>
      <td>卡号</td>
      <td>姓名</td>
      <td>性别</td>
      <td>身份证</td>
      <td>手机</td>
      <td>学校</td>
      <td width="120">创建时间</td>
      <td width="80">操作</td>
    </tr>
    </thead>

  </table>


  <form class="add-stu-form form-inline" action="http://localhost/stu/student" method="post">
    <div class="form-group">
      <label for="card-no">卡号 </label>
      <input name="card_no" class="form-control input-sm" id="card-no" placeholder="请填写卡号">
    </div>
    <div class="form-group">
      <label for="name">姓名 </label>
      <input name="name" class="form-control input-sm" id="name" placeholder="请填写姓名">
    </div>
    <div class="form-group">
      <label class="radio-inline">
        <input type="radio" name="sex" value="0" checked> 男
      </label>
      <label class="radio-inline">
        <input type="radio" name="sex" value="1"> 女
      </label>
    </div>
    <div class="form-group">
      <label for="id-card">身份证 </label>
      <input name="id_card" class="form-control input-sm" id="id-card" placeholder="请填写身份证">
    </div>
    <div class="form-group">
      <label for="phone">手机 </label>
      <input name="phone" class="form-control input-sm" id="phone" placeholder="请填写手机号码">
    </div>
    <div class="form-group">
      <label for="school">学校 </label>
      <input name="school" class="form-control input-sm" id="school" placeholder="请填写学校">
    </div>
    <button id="add-stu-btn" type="submit" class="btn btn-default btn-sm">添加</button>
  </form>

</div>


<div class="footer">
  <p>Ssly 学生管理系统</p>
</div>


<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/datatables/media/js/jquery.dataTables.js"></script>
<script src="/bower_components/datatables/media/js/dataTables.bootstrap.js"></script>
<script src="/bower_components/layer/src/layer.js"></script>
<!-- endbower -->
<!-- endbuild -->

<!-- build:js scripts/plugins.js -->
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/affix.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/alert.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/modal.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/transition.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/button.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/carousel.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/scrollspy.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/collapse.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/tab.js"></script>
<!-- endbuild -->

<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
<script>

  var edit_id;
  $('.add-stu-form').submit(function () {
    var postData = $(this).serializeArray();
    add(postData)
    return false;
  });
  function edit(id) {
    edit_id = id;
    layer.open({
      type: 2,
      title: '修改信息',
      shadeClose: true,
      shade: 0.8,
      area: ['380px', '400px'],
      content: 'edit.html' //iframe的url
    });
  }
  function add(data) {
    $("#add-stu-btn").addClass('disabled');
    $.ajax({
      type: 'post',
      url: '/api/student',
      data: data,
      xhrFields: {
        withCredentials: true
      },
      crossDomain: true,
      success: function (result) {
        if (result.code === 1) {
          layer.msg(result.info, {icon: 6})
          dataTable.draw();
        } else {
          layer.msg(result.info, {icon: 5})
        }
      },
      complete: function () {
        $("#add-stu-btn").removeClass('disabled');
      },
      dataType: 'json'
    })
  }
  function del(btn, id) {
    layer.confirm('确定删除?',{icon:3}, function(index){
      //do something
      $(btn).addClass('disabled')
      $.ajax({
        type: 'DELETE',
        url: '/api/student/' + id,
        xhrFields: {
          withCredentials: true
        },
        crossDomain: true,
        success: function (result) {
          if (result.code === 1) {
            layer.msg(result.info, {icon: 6}, function () {
              dataTable.draw();
            })
          } else {
            layer.msg(result.info, {icon: 5}, function () {
              $(btn).removeClass('disabled')
            })
          }
        },
        complete: function () {
          $(btn).removeClass('disabled')
        },
        dataType: 'json'
      })
    });

  }
  var dataTable;
  $(document).ready(function () {
    dataTable = $('#myTable').DataTable({
      serverSide: true,
      ajax: {
        url: '/api/students'
      },
      columns: [
        {
          data: 'id'
        },
        {
          data: 'card_no'
        },
        {
          data: 'name'
        },
        {
          data: 'sex',
          render: function (data, type, row, meta) {
            return data === '1' ? '女' : '男'
          }
        },
        {
          data: 'id_card'
        },
        {
          data: 'phone'
        },
        {
          data: 'school'
        },
        {
          data: 'create_at'
        },
        {
          data: 'id',
          render: function (data, type, row, meta) {
            return '<button class="btn btn-primary btn-xs" onclick="edit(' + data + ')">修改</button> ' +
              '<button class="btn btn-danger btn-xs" onclick="del(this,' + data + ')">删除</button>'
          }
        },
      ]
    });
  });

</script>
</body>
</html>
